<template>
    <div class="header">
      <div class="top">
        <span 
          class="iconfont icon-zuojiantou left"
          @click="handleClick()"
        ></span>
        <span class="center">一件7折</span>
        <span class="iconfont icon-iconfontzhizuobiaozhun0257 right"></span>
      </div>
      <nav>
        <ul>
          <li>人气</li>
          <li>折扣</li>
          <li>价格 <i class="iconfont icon-triangle-right"></i></li>
          <li>筛选</li>
        </ul>
      </nav>
    </div>
</template>

<script>
import {mapMutations} from "vuex"

export default {
  methods:{
    ...mapMutations("product",["setDataList"]),
    handleClick(){
      this.setDataList([])
      this.$router.push('./index')
    }
  },
}
</script>

<style lang="scss" scoped>
    .header{
      width: 100%;
      background-color: #fff;
      .top{
        height: 0.4rem;
        display: flex;
        align-items: center;
        span{
          display: flex;
          width: 33.33%;
        }
        .left{
          justify-content: flex-start;
          padding-left: 0.2rem;
        }
        .center{
          justify-content: center;
          font-weight: 800;
          font-size: 0.18rem;
        }
        .right{
          justify-content: flex-end;
          padding-right: 0.2rem;
        }
      }
      nav{
        ul{
          display: flex;
          height: 0.4rem;
          align-items: center;
          li{
            width: 25%;
            display: flex;
            justify-content: center;
          }
        }
      }
    }
</style>